<script setup lang="tsx">
import { computed, type PropType, ref, useAttrs, watchEffect } from 'vue'

import { ElImageViewer } from 'element-plus'

import { propTypes } from '@/types/propTypes'

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  imageList: {
    type: Array as PropType<string[]>,
    required: true,
  },
  zIndex: propTypes.number.def(0),
})

const params = ref<{ show?: boolean }>({
  show: false,
})
const attr = useAttrs()

const getBindValue = computed(() => {
  const { imageList } = props
  const pd: any = { ...props, ...attr, urlList: imageList }
  delete pd.show
  delete pd.imageList
  // console.log('object :>>', pd);

  return pd
})
watchEffect(() => {
  if (props.show) {
    init()
  }
})
function init() {
  const { imageList, show } = props
  if (!imageList || (imageList as string[]).length === 0) {
    throw new Error('图片数据不能为空')
  }
  params.value.show = show as boolean
}
function closeTap() {
  params.value.show = false
}
</script>
<template>
  <div v-if="params?.show">
    <ElImageViewer v-bind="getBindValue" @close="closeTap" />
  </div>
</template>
